<template>
  <div class="hello">
    <div class="header">
      <div>
        <p class="Cback" @click="goBack"></p>
        <p class="txt">Ept Stk to Wrap</p>
      </div>
    </div>
    <!-- 输入框 -->
    <div class="divM">
      <div>
        <div class="tit">Location Code：</div>
        <!-- <el-input
          placeholder="Please Scan Location Code"
          suffix-icon="el-icon-camera"
          v-model="locCode"
        >
        </el-input> -->
         <el-select v-model="locCode" placeholder="Please select">
          <el-option
            v-for="item in LocList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <!-- <div>
        <div class="tit">Pallet Type：</div>
        <el-select v-model="objectType" clearable placeholder="Please select">
          <el-option
            v-for="item in objTypeArr"
            :key="item.val"
            :label="item.name"
            :value="item.val"
          >
          </el-option>
        </el-select>
      </div> -->

      <p class="btnG">
        <el-button type="primary" @click="SetOrder">Confirm</el-button>
      </p>
    </div>

    <!-- <div class="footG">解绑成功显示：库位号+料车类型</div> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getTime } from "@/assets/common";
import { LocList } from './LocationList'

export default {
  name: "Binding",
  props: {
    msg: String,
  },
  data() {
    return {
      locCode: "",
      objCode: "",
      showTab: true,
      objTypeArr: [
        { name: "Nine-legged Pallet", val: 1 },
        { name: "Blue Pallet", val: 2 },
      ],
      objectType: "",
      LocList: LocList
    };
  },
  created() {
    this.ipUrl = localStorage.getItem("baseApi");
  },
  watch: {
    ipUrl(val) {
      localStorage.setItem("baseApi", val);
    },
  },
  computed: {
    ...mapState({
      baseApi: (state) => state.baseApi, // api地址,
    }),
  },
  methods: {
    SetOrder() {
      let that = this;
      if (!that.locCode) {
        this.$message({
          message: "All of the above are required fields!",
          type: "warning",
          offset: 56,
        });
      } else {
        let params = {};
        let obj = {
          src: that.locCode,
        };
        params.order_name = "p2p";
        params.priority = 1;
        params.dead_line = getTime("yyyy-mm-dd hh24:mi:ss");
        params.ts_name = "p2a";
        params.created_user = "monitor";
        params.parameters = JSON.stringify(obj);

        that.$api
          .post("http://" + this.baseApi + "/api/om/order/", params)
          .then((data) => {
            if (data.data.length) {
              this.$message({
                message: "success",
                type: "success",
                offset: 56,
              });
              that.locCode = "";
            } else {
              this.$message({
                message: "fail",
                type: "error",
                offset: 56,
              });
            }
          });
      }
    },
    goBack() {
      this.$store.commit("showTab", false);
      this.$router.push({ path: "/" });
    },
    changeIP() {
      this.ipStatus = true;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-message {
  min-width: 1px !important;
  width: 220px;
}
</style>
<style scoped>
.el-message-box {
  width: 100vw !important;
  margin-top: 30vh;
}
.el-message-box__btns button:nth-child(2) {
  margin-left: 0px !important;
}

.footG {
  margin-top: 100px;
  font-size: 16px;
  text-align: center;
}
.btnG {
  display: flex;
  justify-content: center;
}
.divM {
  margin-top: 30px;
  padding: 13px;
  font-size: 16px;
}
.divM > div {
  display: flex;
  align-items: center;
  margin-bottom: 26px;
}
.tit {
  width: 43vw;
}
.Btn-div {
  display: flex;
}
.btnD {
  width: 70px;
  height: 70px;
  border: 1px solid black;
  margin-right: 20px;
  text-align: center;
}
.Cback {
  width: 30px;
  background: url("@/assets/back.png") no-repeat 0px/100%;
  margin: 0 0 0 8px;
}
.txt {
  width: 75vw;
  /* margin-left: 58px; */
  /* justify-content: center; */
}
.divG {
  display: flex;
  border-bottom: 1px solid rgb(203, 198, 198);
  padding-bottom: 5px;
  color: #838282;
  margin-bottom: 16px;
}
.font-colorC {
  color: #17abe3;
}
.divs {
  display: flex;
  height: 100%;
}
.divs > div {
  width: 50%;
  text-align: center;
  font-size: 10px;
}
.label {
  width: 30vw;
}
.val {
  width: 68vw;
}
.el-input {
  width: 66vw;
}
.el-input__inner {
  height: 12vw;
  font-size: 15px;
}
.el-button {
  width: 90vw;
  margin: 10px 0px;
}
.header {
  background-color: #303030;
  color: #fff;
  text-align: center;
  line-height: 60px;
  width: 100vw;
  font-size: 20px;
}
.header > div {
  display: flex;
  text-align: center;
}
</style>
